<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GatewayWorker讨论室</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="{:config('app.view_replace_str.__HOME_CSS__')}/bootstrap.css">
    <link href="{:config('app.view_replace_str.__HOME_CSS__')}/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="notification sticky hide">
    <p id="content"></p>
    <a class="close" href="javascript:"> <img src="{:config('app.view_replace_str.__HOME_IMG__')}/icon-close.png"/></a>
</div>
<div style="height: 50px;width: 100%;text-align: center;border-bottom: 1px solid #f8f8f8;line-height: 50px;font-size: 20px;font-weight: bold"  class="navbar navbar-default navbar-fixed-top">
    讨论室
</div>
<div id="output" class="container" style="margin-top: 50px;height: 500px;overflow-y: scroll"></div>
<div class="container" >
    填写你需要发送的内容：
    <input type="text" style="height: 50px; width: 100%;font-size: 20px" name="data" id="data">
    <p></p>
    <button id="submit" onclick="sub()">发送</button>
    <p></p>

</div>
<script src="{:config('app.view_replace_str.__ADMIN_JS__')}/core/jquery.min.js"></script>
<script src="{:config('app.view_replace_str.__HOME_JS__')}/reconnecting-websocket.min.js"></script>
<script language="javascript" type="text/javascript">
    var wsUri = "ws://127.0.0.1:8282/";
    var outputContent;
    var roomId = 'L06777';
    var userId = RndNum(8);
    var userName ='Room'+RndNum(8);
    var joinContent = {
        "type": "join",
        "roomId": roomId,
        "userId": userId,
        "userName": userName
    };
    // 初始化页面操作
    function init() {
        outputContent = document.getElementById("output");
        initWebSocket();
    }
    function initWebSocket() {
        websocket = new ReconnectingWebSocket(wsUri);
        websocket.onopen = function (evt) {
            var bind = '{"type":"bindUser","userId":"'+userId+'"}';
            websocket.send(bind);
            onOpen(evt)
        };
        websocket.onclose = function (evt) {
            onClose(evt)
        };
        websocket.onmessage = function (evt) {
            onMessage(evt)
        };
        websocket.onerror = function (evt) {
            onError(evt)
        };
    }

    function onOpen(evt) {
        console.log("CONNECTED");
    }
    // 接收数据
    function onMessage(evt) {
        var data = eval("(" + evt.data + ")");
        var type = data.type || '';
        var bindUrl = "{:url('BindClientId')}";
        switch (type) {
            case 'init':
                // 把当新链接的客户端加入到当前直播间
                //console.log('-init-新的client_id用户:' + evt.data);
                //把数据提交到置顶的接口
                $.post(bindUrl, {user_name:"大海",sex:"男"}, function(data){

                }, 'json');
                websocket.send(JSON.stringify(joinContent));
                break;
            case 'join':
                //console.log('-join-用户加入提醒' + data);
                writeToScreen(
                    '<span style="color: blue;"> ' + ' 用户: ' + '</span>' +
                    '<span style="color: red;"> ' + data.userName + '</span>' +
                    '<span style="color: green;"> ' + data.joinTime + '</span>' +
                    '<span style="color: black;"> ' + data.msg + '</span>'
                );
                break;
            case 'say':
                //console.log('-say-'+data.client_id+'发言的消息' + data);
                writeToScreen(
                    '<span style="color: blue;"> ' + ' 用户 ' + '</span>' +
                    '<span style="color: red;"> ' + data.userName+':' + '</span>' +
                    '<span style="color: black;"> ' + data.content +';' + '</span>'+
                    '<span style="color: #D2691E;"> ' + data.commentTime + '</span>'
                    //'<span style="color: black;"> ' + data.client_id + '</span>'
                );
                break;
            default :
                var data_type = data.type;
                switch (data_type){
                    case "JWTTOKEN":
                        writeToScreen(
                            '<span style="color: blue;"> ' + ' 这是的jwt_token值是: '+data.token + '</span>'
                            //'<span style="color: black;"> ' + data.client_id + '</span>'
                        );
                        break;
                    case "JWT":
                        writeToScreen(
                            '<span style="color: blue;"> ' + ' 这是的jwt_token值是: '+data.msg + '</span>'
                            //'<span style="color: black;"> ' + data.client_id + '</span>'
                        );
                        break;
                    default :
                        console.log(data);
                        break;
                }
                break;
        }
    }
    function onError(evt) {
        console.log('<span style="color: red;">ERROR:</span> ' + evt.data);
    }
    //关闭时发送的提示语
    function onClose(evt) {
        console.log("DISCONNECTED(断开链接,需要重新绑定)");
    }
    function writeToScreen(message) {
        var pre = document.createElement("p");
        pre.style.wordWrap = "break-word";
        pre.innerHTML = message;
        outputContent.appendChild(pre);
    }
    //产生随机数函数
    function RndNum(n){
        var rnd="";
        for(var i=0;i<n;i++){
            rnd+=Math.floor(Math.random()*10);
        }
        return rnd;
    }
    //发送消息内容
    function sub() {
        var text = document.getElementById('data').value;
        var sayContent = {
            "type": "say",
            "roomId": roomId,
            "userId": userId,
            "userName": userName,
            "content": text
        };
        websocket.send(JSON.stringify(sayContent));
        $(" #data").val('');
    }
    window.addEventListener("load", init, false);
</script>
</body>

</html>　　